<template>
  <div class="shxq" ref="main">
    <div class="shxq1">
      <img :src="shlist.picurl" alt="" />
    </div>
    <div class="cont">
      <div class="title">{{ shlist.xmmc }}</div>
      <div class="tip">
        <span>{{ shlist.jibiename }}</span>
        <span>{{ shlist.xmlbname }}</span>
      </div>
      <div class="jiben">
        <div class="jb">
          <img src="../../assets/images/k2.png" alt="" />
          <div class="dh">公布时间：{{ shlist.gbsj | formatDate }}</div>
        </div>
        <div class="jb1">
          <div class="jb2">
            <img src="../../assets/images/k3.png" alt="" />
            <div class="dh">所属地区：{{ shlist.diquname }}{{ shlist.areaname }}</div>
          </div>
        </div>
        <div class="jb1">
          <div class="jb2">
            <img src="../../assets/images/w2.png" alt="" />
            <div class="dh">保护单位：{{ shlist.bhdw }}</div>
          </div>
        </div>
      </div>
      <div class="jianjie" v-if="shlist.xuanchuanjianjie">
        <div class="jj">简介</div>
        <div class="jj1" v-html="shlist.xuanchuanjianjie"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getxmList } from "@/api/api.js";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  name: "",
  data() {
    return {
      id: 0,
      shlist: {},
      xgsp: [],
      yhlist: {},
      user: JSON.parse(localStorage.getItem('userlogin')),
      tm: '',
      bankSwitch: false,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.yhlist = JSON.parse(localStorage.getItem('userlogin'))
    this.shList();
  },
  components: {
  },
  mounted() {

  },
  methods: {
    daohang() {
      //  window.location.href = `http://api.map.baidu.com/marker?location=30.16572,120.11062&title=浙江省非物质文化遗产馆&content=杭州市西湖区支路二恒大·澜玉水晶熙园西侧约140米&output=html`
      window.location.href = 'http://api.map.baidu.com/marker?location=' + this.shlist.shWeidu + ',' + this.shlist.shJingdu + '&title=' + this.shlist.shmc + '&content=' + this.shlist.shAddress + '&output=html'
    },
    async shList() {
      let res = await getxmList({
        id: this.id,
      });
      if (res.code == 200) {
        this.shlist = res.data.list[0];
        this.xgsp = res.data.list[0].spList;
        console.log(this.shlist, "0098987");
      }
    },
  },

};
</script>
<style scoped lang="scss">
.shxq {
  width: 100%;
  position: relative;

  .shxq1 {
    width: 100%;

    img {
      width: 100%;
      height: 18.6875rem;
    }
  }

  .cont {
    position: relative;
    width: calc(100% - 0rem);
    // height: 33.1875rem;
    background: #ffffff;
    border-radius: 1rem 1rem 0px 0px;
    position: absolute;
    top: 17.5rem;
    left: 0;
    padding: 1.5625rem 0;

    .title {
      width: calc(100% - 2.5rem);
      font-size: 1.25rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 550;
      color: #333333;
      line-height: 1.8125rem;
      padding: 0 1.25rem;
    }

    .tip {
      padding: 0 1.25rem;
      margin-top: .625rem;

      span {
        color: #1374fd;
        background-color: #dae9ff;
        border-color: #dae9ff;
        font-size: .625rem;
        padding: .1875rem .375rem;
        align-items: center;
        border-radius: .1875rem;
        display: inline-block;
      }

      span:first-child {
        margin-right: .3125rem;
      }
    }

    .jiben {
      position: relative;
      width: calc(100% - 2.5rem);
      padding: 0 1.25rem 0;

      .jb {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 1.25rem;

        img {
          width: 1.0813rem;
          height: 1.0562rem;
        }

        .dh {
          font-size: 12px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #666666;
          line-height: 18px;
          padding-left: 0.5rem;
        }
      }

      .jb1 {
        display: flex;
        // align-items: center;
        width: 100%;
        padding-top: 0.5625rem;

        .jb2 {
          display: flex;
          // align-items: center;
          width: 85%;

          img {
            width: 1.0813rem;
            height: 1.0562rem;
          }

          .dh {
            font-size: 12px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: #666666;
            line-height: 1.125rem;
            padding-left: 0.5rem;
          }
        }

        .jb3 {
          width: 15%;
          display: flex;
          justify-content: center;
          padding-top: 0.25rem;

          img {
            width: 0.9375rem;
            height: 0.9375rem;
          }
        }
      }
    }

    .jianjie {
      width: calc(100% - 2.5rem);
      padding: 1.5rem 1.25rem 0;

      .jj {
        font-size: 1rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #333333;
        line-height: 1.5rem;
      }

      .jj1 {
        padding-top: 0.6875rem;
        width: 100%;
        font-size: 0.75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 1.25rem;
        text-align: justify;
      }
    }

  }

}
</style>